<template>
  <div class="wechatDockStep">
    <div class="header">
      <img src="../../../../../assets/img/weChatDockStep1.png" v-if="currentStep === 'step1'">
      <img src="../../../../../assets/img/weChatDockStep2.png" v-if="currentStep === 'step2'">
    </div>
    <div class="container">
      <div class="step step1" v-if="currentStep === 'step1'">
        <weixin-dock-info @saveDone="step1done" @cancel="step1Cancel" type="add"></weixin-dock-info>
      </div>
      <div class="step step2" v-if="currentStep === 'step2'">
        <weixin-dock-step2 :_id="step2id" @cancel="step1Cancel" type="add"></weixin-dock-step2>
      </div>
    </div>
  </div>
</template>

<script>
  import weixinDockInfo from './wechatDockInfo.vue'
  import weixinDockStep2 from './wechatDockStep2.vue'
  export default {
    name: 'wechatDockStep',
    data () {
      return {
        currentStep: 'step1',
        step2id: ''
      }
    },
    methods: {
      step1Cancel () {
        this.$emit('cancel')
      },
      step1done (_id) {
        this.step2id = _id
        this.currentStep = 'step2'
      }
    },
    components: {
      weixinDockInfo,
      weixinDockStep2
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .wechatDockStep
    text-align center
    height: calc(100vh - 200px);
    overflow: scroll;
    .header
      margin:20px
      img
        width 720px
    .step
      .title
        font-size 18px
        margin: 5px
      .step2form
        .item
          margin 10px auto
          .label
            width 150px
            display inline-block
            text-align left
          .el-input
            width 300px
          .copy
            margin 0 20px
            cursor pointer
            color $c-main
</style>
